<template>
  <div class="flex dark sticky h-16 w-full bg-white text-black top-0">
    <!-- 限制宽度的div -->
    <div class="container flex h-full items-center justify-between">
      <!--隐藏的移动端div-->
      <div class="flex lg:hidden">
        <button class="focus-ring p-2" type="button" ref="mline" @click="showLine">
          <div class="flex items-center">
            <svg t="1704202999816" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8656" width="24" height="24">
              <path
                d="M133.310936 296.552327l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949 0-19.781623-15.997312-35.950949-35.950949-35.950949L133.310936 224.650428c-19.781623 0-35.950949 16.169326-35.950949 35.950949C97.359987 280.383 113.529313 296.552327 133.310936 296.552327z"
                fill="#575B66"
                p-id="8657"
              ></path>
              <path
                d="M890.51705 476.135058 133.310936 476.135058c-19.781623 0-35.950949 16.169326-35.950949 35.950949 0 19.781623 16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949C926.467999 492.304384 910.298673 476.135058 890.51705 476.135058z"
                fill="#575B66"
                p-id="8658"
              ></path>
              <path
                d="M890.51705 727.447673 133.310936 727.447673c-19.781623 0-35.950949 15.997312-35.950949 35.950949s16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-15.997312 35.950949-35.950949S910.298673 727.447673 890.51705 727.447673z"
                fill="#575B66"
                p-id="8659"
              ></path>
            </svg>
          </div>
        </button>
        <button class="focus-ring p-2 hidden" type="button" ref="mclose" @click="hiddenLine">
          <div class="flex items-center">
            <svg t="1704196997584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6532" width="24" height="24">
              <path
                d="M558.096874 509.244236l278.304494-276.863678c13.159718-13.094226 13.226233-34.31248 0.132006-47.472198-13.123902-13.189394-34.305317-13.226233-47.465035-0.132006L510.692215 461.669708 234.740302 184.877661c-13.062504-13.093203-34.310434-13.159718-47.470151-0.066515-13.129019 13.093203-13.160741 34.342156-0.066515 47.501874l275.885398 276.725532L184.918593 785.733385c-13.160741 13.094226-13.226233 34.310434-0.134053 47.472198 6.54609 6.581905 15.172561 9.900487 23.799032 9.900487 8.56098 0 17.125029-3.252067 23.672142-9.768481l278.236955-276.761348 278.473339 279.31245c6.54609 6.582929 15.142885 9.871835 23.768333 9.871835 8.594749 0 17.155728-3.288906 23.701818-9.80532 13.123902-13.093203 13.159718-34.305317 0.066515-47.465035L558.096874 509.244236 558.096874 509.244236zM558.096874 509.244236"
                fill="#272636"
                p-id="6533"
              ></path>
            </svg>
          </div>
        </button>

        <div class="absolute top-full left-0 invisible w-full hidden" ref="mMenu">
          <div class="flex pdl-2 pdr-2">
            <ul class="flex flex-col gap-2 w-full pdr-3 pdl-3 pdt-2 pdb-1">
              <li class="lii w-full">
                <div class="flex items-center m-2">
                  <span class="text-white group-hover:text-blue group-focus:text-blue dark:group-hover:text-blue transition duration-200 text-tiny">Doc</span>
                </div>
              </li>
              <li class="lii w-full">
                <div class="flex items-center m-2">
                  <span class="text-white group-hover:text-blue group-focus:text-blue dark:group-hover:text-blue transition duration-200 text-tiny">FAQ</span>
                </div>
              </li>
              <li class="lii w-full">
                <div class="flex items-center m-2">
                  <span class="text-white group-hover:text-blue group-focus:text-blue dark:group-hover:text-blue transition duration-200 text-tiny">Support</span>
                </div>
              </li>
              <li class="lii w-full">
                <div class="flex items-center m-2">
                  <span class="text-white group-hover:text-blue group-focus:text-blue dark:group-hover:text-blue transition duration-200 text-tiny">Video Guide</span>
                </div>
              </li>
              <li class="lii w-full">
                <div class="flex items-center m-2">
                  <span class="text-white group-hover:text-blue group-focus:text-blue dark:group-hover:text-blue transition duration-200 text-tiny">Console</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="flex h-full items-center gap-3">
        <div class="flex">
          <a href="/" target="_self" class="focus-ring">
            <div class="h-6">
              <img src="@/assets/logo.svg" alt="logo" width="24" height="24" loading="lazy" decoding="async" />
            </div>
          </a>
          <div class="flex pr-2 px-3 b-2 hidden lg:!opacity lg:visible lg:flex"></div>
        </div>
        <div class="flex h-full items-cneter">
          <div class="group/mega-menu flex h-full items-center">
            <a
              href="javascript:void(0);"
              target="_self"
              class="group outline-none peer hidden h-full items-center px-3 group-focus-within/mega-menu:outline-none group-active/mega-menu:outline-none lg:!visible lg:flex lg:!opacity-100"
            >
              <div class="flex items-center">
                <span class="text-black text-tiny duration-200"> Doc </span>
              </div>
            </a>
          </div>
          <div class="group/mega-menu flex h-full items-center">
            <a
              href="javascript:void(0);"
              class="group outline-none peer hidden h-full items-center px-3 group-focus-within/mega-menu:outline-none group-active/mega-menu:outline-none lg:!visible lg:flex lg:!opacity-100"
            >
              <div class="flex items-center">
                <span class="text-black text-tiny duration-200"> FAQ </span>
              </div>
            </a>
          </div>
          <div class="group/mega-menu flex h-full items-center">
            <a
              href="javascript:void(0);"
              class="group outline-none peer hidden h-full items-center px-3 group-focus-within/mega-menu:outline-none group-active/mega-menu:outline-none lg:!visible lg:flex lg:!opacity-100"
            >
              <div class="flex items-center">
                <span class="text-black text-tiny duration-200"> Support </span>
              </div>
            </a>
          </div>
          <div class="group/mega-menu flex h-full items-center">
            <a
              href="javascript:void(0);"
              class="group outline-none peer hidden h-full items-center px-3 group-focus-within/mega-menu:outline-none group-active/mega-menu:outline-none lg:!visible lg:flex lg:!opacity-100"
            >
              <div class="flex items-center">
                <span class="text-black text-tiny duration-200"> Video Guide </span>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="flex items-center gap-4">
        <div class="flex h-full items-cneter">
          <div class="group/mega-menu flex h-full items-center">
            <a
              href="javascript:void(0)"
              target="_self"
              class="group outline-none peer hidden h-full items-center px-3 group-focus-within/mega-menu:outline-none group-active/mega-menu:outline-none lg:!visible lg:flex lg:!opacity-100"
            >
              <div class="flex items-center">
                <span class="text-black text-tiny duration-200">Console</span>
              </div>
            </a>
          </div>
        </div>
        <div class="flex pl-3">
          <svg t="1704190096158" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5242" width="24" height="24">
            <path
              d="M848.805886 805.572222c70.998007-81.260745 109.779266-184.217628 109.779266-293.14448 0-119.204939-46.421262-231.277434-130.713041-315.569212C744.876861 113.862257 634.94103 67.61598 517.788843 66.213028c-1.924839-0.599657-10.290367-0.592494-12.227486 0.01535C388.878868 67.945485 279.434224 114.159016 196.73471 196.85853 113.863281 279.730982 67.630307 389.460106 66.095347 506.415818c-0.428765 1.64957-0.436952 8.601912-0.021489 10.226922 1.082658 117.628024 47.364751 228.058113 130.660852 311.354214 84.291778 84.291778 196.36325 130.713041 315.569212 130.713041 119.204939 0 231.277434-46.421262 315.569212-130.713041 6.139837-6.139837 12.054547-12.444427 17.789155-18.871813 0.50756-0.453325 1.001817-0.928139 1.471514-1.440815C847.750857 807.012014 848.295256 806.299793 848.805886 805.572222zM107.447151 532.043499l187.501418 0c1.322112 65.678862 9.253758 127.264499 22.505573 182.112688-61.690014 16.687054-100.819197 38.371936-121.076566 51.906184C144.30971 701.336206 111.676475 620.35687 107.447151 532.043499zM195.881272 259.408121c20.090571 13.556761 59.242266 35.461653 121.340579 52.260248-12.998035 54.127781-20.827351 114.778116-22.243607 179.432649L107.525945 491.101018C112.076588 403.731134 144.437623 323.612399 195.881272 259.408121zM917.081898 491.099994 729.628576 491.099994c-1.415232-64.630996-9.240455-125.260865-22.229281-179.37432 61.95505-16.693194 101.235682-38.444591 121.56673-52.020794C880.270505 323.860039 912.537396 403.866211 917.081898 491.099994zM688.677908 491.099994 532.167319 491.099994 532.167319 335.061149c52.209082-1.094938 97.103572-6.453992 135.272893-14.033621C680.000272 373.163955 687.286212 430.896844 688.677908 491.099994zM532.167319 294.115598 532.167319 109.918435c36.84107 10.398838 72.779583 49.205679 100.926644 110.015649 8.810666 19.035542 16.645099 39.641859 23.464411 61.521169C621.531626 288.227494 580.261687 293.062616 532.167319 294.115598zM491.223814 110.273523l0 183.805236c-47.504944-1.12666-88.378863-6.001691-123.120109-12.802584 6.807033-21.812795 14.623046-42.35976 23.409153-61.344137C419.351903 159.792333 454.809463 121.175827 491.223814 110.273523zM491.223814 335.040682l0 156.059312L335.928912 491.099994c1.391696-60.213383 8.679683-117.955482 21.243837-170.099073C395.008472 328.536548 439.487499 333.887416 491.223814 335.040682zM335.893096 532.043499l155.330718 0 0 158.667719c-51.609425 1.194198-96.019891 6.563486-133.821845 14.103206C344.576873 651.927913 337.193719 593.243349 335.893096 532.043499zM491.223814 731.672118l0 182.909843c-36.415374-10.902304-71.871911-49.51881-99.709933-109.659539-8.679683-18.752086-16.409738-39.034015-23.157419-60.551074C402.9964 737.645157 443.773106 732.820268 491.223814 731.672118zM532.167319 914.937049 532.167319 731.608673c47.904033 1.025353 89.103364 5.862521 124.116809 12.656251-6.755868 21.555945-14.497179 41.87369-23.190165 60.656475C604.946902 865.73137 569.008388 904.538211 532.167319 914.937049zM532.167319 690.660052 532.167319 532.043499l156.546406 0c-1.298576 61.096497-8.66024 119.68487-21.445428 172.502819C629.154233 697.013761 584.319096 691.710988 532.167319 690.660052zM729.659275 532.043499l187.501418 0c-4.221138 88.138386-36.732599 168.973436-88.620363 233.635131-20.469194-13.668301-59.635215-35.298947-121.30374-51.868321C720.43724 659.049101 728.33921 597.585237 729.659275 532.043499zM801.518906 228.742704c-18.329461 11.570523-52.309366 29.355585-104.858186 43.493583-19.295462-63.056128-46.110177-115.004267-78.06189-150.97655C689.00025 140.410913 751.833297 178.097234 801.518906 228.742704zM406.007991 121.259738c-31.905664 35.920094-58.690704 87.768973-77.979002 150.702304-52.40351-14.241352-86.370113-32.099069-104.581893-43.587728C273.076422 177.914062 335.777463 140.364865 406.007991 121.259738zM223.917816 796.963147c18.284435-11.535731 52.098565-29.230742 104.332207-43.335994 19.271926 62.60485 45.976124 114.186645 77.757968 149.968593C335.99952 884.550994 273.472442 847.181899 223.917816 796.963147zM618.59883 903.595746c31.801287-35.803437 58.517765-87.426165 77.792761-150.08218 51.984978 14.023388 85.972047 31.631418 104.533798 43.208081C751.3329 847.061149 688.718841 884.521319 618.59883 903.595746z"
              fill="#272636"
              p-id="5243"
            ></path>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    showLine: function () {
      this.$refs.mline.classList.add("hidden");
      this.$refs.mclose.classList.remove("hidden");
      this.$refs.mMenu.classList.remove("hidden");
    },
    hiddenLine: function () {
      this.$refs.mclose.classList.add("hidden");
      this.$refs.mMenu.classList.add("hidden");
      this.$refs.mline.classList.remove("hidden");
    }
  }
};
</script>

<style lang="css">
.flex {
  display: flex;
}
.w-full {
  width: 100%;
}
.h-16 {
  height: 4rem;
}
.top-0 {
  top: 0;
}
.sticky {
  position: sticky;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}
.h-full {
  height: 100%;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

@media (min-width: 744px) {
  .container {
    max-width: 744px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1440px;
    padding-right: 4rem;
    padding-left: 4rem;
  }
}

.gap-3 {
  gap: 0.75rem;
}
.focus-ring:focus {
  border-radius: 0.125rem;
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 4px;
  outline-color: #2196f3;
}

.focus-ring:focus-visible {
  border-radius: 0.125rem;
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 4px;
  outline-color: #2196f3;
}
.h-6 {
  height: 1.5rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.b-2 {
  border-right-color: black;
  border-right-style: solid;
  border-right-width: 2px;
}
.group\/mega-menu:active .group-active\/mega-menu\:outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.hidden {
  display: none;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

@media (min-width: 1024px) {
  .lg\:\!visible {
    visibility: visible !important;
  }
}
@media (min-width: 1024px) {
  .lg\:flex {
    display: flex;
  }
}

@media (min-width: 1024px) {
  .lg\:\!opacity-100 {
    opacity: 1 !important;
  }
}

.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.text-tiny {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.125rem;
  letter-spacing: -0.002em;
}

@media (min-width: 744px) {
  .text-tiny {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.duration-200 {
  transition-duration: 0.2s;
}

:is(.dark .group:hover .dark\:group-hover\:text-blue) {
  --tw-text-opacity: 1;
  color: rgb(33 150 243 / var(--tw-text-opacity));
}

.group:focus .group-focus\:text-blue {
  --tw-text-opacity: 1;
  color: rgb(33 150 243 / var(--tw-text-opacity));
}

.group:hover .group-hover\:text-blue,
.group\/breadcrumb:hover .group-hover\/breadcrumb\:text-blue {
  --tw-text-opacity: 1;
  color: rgb(33 150 243 / var(--tw-text-opacity));
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}

a {
  color: inherit;
  text-decoration: inherit;
}
.pl-3 {
  padding-left: 0.75rem;
}

@media (min-width: 1024px) {
  .lg\:hidden {
    display: none;
  }
}
.absolute {
  position: absolute;
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.w-full {
  width: 100%;
}

.top-full {
  top: 100%;
}

.left-0 {
  left: 0;
}

ul,
ol {
  list-style: none;
}
.pdl-2 {
  padding-left: 0.5rem;
}
.pdr-2 {
  padding-right: 0.5rem;
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.m-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0;
  padding-right: 0;
}
.lii {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #e6e6e6;
}

.flex-col {
  flex-direction: column;
}
.gap-2 {
  gap: 0.5rem;
}
.pdr-3 {
  padding-right: 0.75rem;
}
.pdl-3 {
  padding-left: 0.75rem;
}
.pdt-2 {
  padding-top: 0.5rem;
}
.pdb-1 {
  padding-bottom: 0.5rem;
}
.c-hidden {
  display: none;
}

.p-2 {
  padding: 0.5rem;
}

[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
.mn:focus {
  display: none;
}
.mn:hover {
  background-color: red;
}
.l-line:focus + .l-close {
  display: block;
}
.pointer-event {
  /* pointer-events: none; */
}
button,
select {
  text-transform: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

[role="button"],
button {
  cursor: pointer;
}
.l-close:focus {
  background-color: red;
}

[role="button"],
button {
  cursor: pointer;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
button,
select {
  text-transform: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
</style>
